<template>
    <div>
        <!--
                <ul>
                    <li v-for="item in list" :key="item">{{item}}</li>
                </ul>
                <ul>
                    <li v-for="(item,i) in list" :key="item">{{i+1}}-&#45;&#45;{{item}}</li>
                </ul>
                <ul>
                    <li v-for="(item,key,i) in obj" :key="item">{{i+1}}-&#45;&#45;{{key}}-&#45;&#45;{{item}}</li>
                </ul>
                <ul>
                    <li :class="{active:item.active}" @mouseenter="over(i)" @mouseleave="out(i)" v-for="(item,i) in books"
                        :key="item.id">
                        {{i+1}}-&#45;&#45;{{item.name}}-&#45;&#45;{{item.price}}
            </li>
        </ul>
-->
        <br>
        <!--        没有key的情况,eslint会强制要求有key所以需要删除它-->
        <input type="text" v-model="name">
        <button @click="add()">insert</button>
        <ul>
            <li :class="{active:item.active}" @mouseenter="over(i)" @mouseleave="out(i)" v-for="(item,i) in books" :key="item.id">
                <input type="checkbox">{{i+1}}-&#45;&#45;{{item.name}}-&#45;&#45;{{item.price}}
            </li>
        </ul>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "App",
        data() {
            return {
                list: ['a', 'b', 'c', 'd', 'e'],
                obj: {
                    name: 'abc',
                    url: 'http://www.baidu.com',
                    slogen: '111'
                },
                name: '',
                newid: 5,
                books: [
                    {id: 1, name: 'a', price: 1, active: false,},
                    {id: 2, name: 'b', price: 2, active: false,},
                    {id: 3, name: 'c', price: 3, active: false,},
                    {id: 4, name: 'd', price: 4, active: false,},
                    {id: 5, name: 'e', price: 5, active: false,},
                ]
            }
        },
        methods: {
            over(index) {
                for (let i = 0; i < this.books.length; i++) {
                    if (i == index)
                        this.books[i].active = true;
                }
            },
            out(index) {
                console.log(index);
                for (let i = 0; i < this.books.length; i++) {
                    if (i == index)
                        this.books[i].active = false;
                }
            },
            add() {
                this.books.unshift({id: ++this.newid, name: this.name, price: 123, active: false});
            }
        }
    }
</script>

<style scoped>
    .active {
        background: greenyellow;
        color: white;
    }
</style>